<template>
	<view class="jiemxiajia-box">
		<!-- 图片轮播 -->
		<swiper class="swiper" :indicator-dots="info.coverList.length > 1" autoplay circular :current="swiperCurrent"
			@change="onSwiperChange" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(img, index) in info.coverList" :key="index" @click="preview(info.coverList,index)">
				<image :src="img || ''" class="swiper-image" @load="onImageLoad" style="width: 100%;" />
			</swiper-item>
		</swiper>

		<view class="Imagesa" v-show="Array.isArray(imageList) && imageList.length" >
			<view class="" v-for="(item,index) in imageList" :key="index" @click="fangda(imageList,index)" >
				<image :src="item.url" style="width: 300rpx;height: 300rpx;" mode=""></image>
			</view>
		</view>

		<!-- 商品信息展示 -->
		<view class="jiexia-const">
			<view>名称：</view>
			<view>{{ info.name }}</view>
			<view class="" @click="fuzhis(info.name)">复制</view>
		</view>

		<view class="jiexia-const" v-for="(item,index) in info.sourceIndex" :key="index">
			<view>仓库{{index +1}}：</view>
			<view>{{item}}</view>
		</view>

		<view class="jiexia-const">
			<view>价格：</view>
			<view>{{ info.salePrice == null ? '暂无' : info.salePrice + ' 元' }}</view>
		</view>

		<view class="jiexia-const">
			<view>分类：</view>
			<view>{{ info.categoryName || '暂无' }}</view>
		</view>

		<view class="jiexia-const">
			<view>扣眼：</view>
			<view>{{ info.eyeletType  || '暂无' }}</view>
		</view>

		<view class="jiexia-const">
			<view>大小：</view>
			<view>{{ info.size || '暂无' }}</view>
		</view>

		<view class="button-container" v-show="xiugaiSt">
			<button class="modify-button" @click="onModifyClick">修改</button>
		</view>

		<view>
			<canvas canvas-id="myCanvas"
				style="width: 300px; height: 300px; opacity: 0; position: absolute; left: -9999px; z-index: -1;"></canvas>
		</view>
	</view>
</template>

<script>
	import suffixAddress from '../../api/suffixAddress.js';
	import request from '../../api/index.js';
	import api from '../../api/Channel.js'

	export default {
		data() {
			return {
				swiperCurrent: 0,
				swiperWidth: 0,
				swiperHeight: 0,
				info: {
					coverList: [],
					qrCode: {
						url: ''
					},
					name: '',
					salePrice: null,
					categoryName: '',
					source: '',
					sourceIndex: ''
				},
				options: '',
				shangpId: '',
				img1: '',
				img2: '',
				resultImage: '',
				xiugaiSt: false,
				infoXiugai: {
					coverList: [],
					qrCode: {
						url: ''
					},
					name: '',
					salePrice: null,
					categoryName: '',
					source: '',
					sourceIndex: '',
				},
				imageList: [],
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if (options.scene) {
				const params = decodeURIComponent(options.scene).split('_');
				const commodityId = params[1];
				const refId = params[3];
				this.leiro(commodityId)
				this.shangpId = commodityId
			} else {
				let data = decodeURIComponent(options.data)
				data = JSON.parse(data)
				console.log(data)
				this.leiro(data.id)
				this.shangpId = data.id
			}
			let userText = uni.getStorageSync('user') || {};
			this.xiugaiSt = !!(userText.data && userText.data.config && userText.data.config.enableUploadCommodity);
		},
		onShareAppMessage() {
			return {
				title: this.info.name,
				path: '/pages/jiemxiajia/jiemxiajia?data=' + JSON.stringify({
					id: this.shangpId
				}),
				imageUrl: this.info.coverList[0]?.url || ''
			}
		},
		onReady() {
			uni.createSelectorQuery()
				.select('.swiper')
				.fields({
					size: true
				}, res => {
					this.swiperWidth = res.width
				})
				.exec()
		},
		methods: {
			fangda(imageList,index) {
				console.log(imageList,index)
				let arr = []
				imageList.forEach(el=>{
					arr.push(el.url)  
				})
				uni.previewImage({
					current: arr[index],
					urls: arr
				})
			},
			onSwiperChange(e) {
				this.swiperCurrent = e.detail.current
			},
			async leiro(id) {
				let obj = {
					url: api.ctrl + suffixAddress.add().type + '/' + id
				}
				let res = await request(obj)
				this.infoXiugai = res.data.id

				// #ifdef MP-WEIXIN 
				let arr = []
				for (const el of res.data.coverList) {
					el.url = el.url
					this.img1 = el.url
					this.img2 = res.data.qrCode.url
					const imageUrl = await this.mergeImages();
					arr.push(imageUrl);
				}
				res.data.coverList = arr
				uni.hideLoading();
				this.info = res.data
				this.imageList = this.info.aiImageList
				// #endif

				// #ifdef MP-TOUTIAO || MP-XHS
				this.info = res.data
				let arr = [];
				this.info.coverList.forEach(el => {
					arr.push(el.url)
				})
				this.info.coverList = arr
				uni.hideLoading();
				// #endif
			},
			preview(item, index) {
				console.log(item, index)
				uni.previewImage({
					current: item[index],
					urls: item
				})
			},
			onImageLoad(e) {
				const {
					width,
					height
				} = e.detail
				this.swiperHeight = this.swiperWidth * (height / width)
			},
			fuzhis(item) {
				if (!item) {
					uni.showToast({
						title: '不能复制空的',
						icon: 'error'
					});
					return
				}
				uni.setClipboardData({
					data: item,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				})
			},
			mergeImages() {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: this.img1,
						success: (res1) => {
							uni.getImageInfo({
								src: this.img2,
								success: (res2) => {
									const ctx = uni.createCanvasContext('myCanvas', this);
									const canvasSize = 300;
									let sx = 0,
										sy = 0,
										sw = 0,
										sh = 0;

									if (res1.width > res1.height) {
										sw = sh = res1.height;
										sx = (res1.width - res1.height) / 2;
									} else {
										sw = sh = res1.width;
										sy = (res1.height - res1.width) / 2;
									}

									ctx.drawImage(res1.path, sx, sy, sw, sh, 0, 0,
										canvasSize, canvasSize);
									ctx.drawImage(res2.path, 0, 0, res2.width, res2.height,
										0, 250, 50, 50);

									ctx.draw(false, () => {
										uni.canvasToTempFilePath({
											canvasId: 'myCanvas',
											success: (res) => {
												this.resultImage = res
													.tempFilePath;
												resolve(res
													.tempFilePath);
											},
											fail: reject
										}, this);
									});
								},
								fail: reject
							});
						},
						fail: reject
					});
				});
			},
			onModifyClick() {
				const objectStr = JSON.stringify(this.infoXiugai);
				uni.redirectTo({
					url: `/pages/ModifyProduct/ModifyProduct?data=${encodeURIComponent(objectStr)}`
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #f5f5f5;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	}

	.Imagesa {
		width: 100vw;
		height: 300rpx;
		display: flex;
		overflow-x: auto;

		&::-webkit-scrollbar {
			display: none;
			/* 或 width: 0; height: 0; */
		}
	}

	.jiemxiajia-box {
		padding-bottom: 80rpx;
		background: linear-gradient(to bottom, #f8f8f8 0%, #f0f0f0 100%);
	}

	.swiper {
		width: 100%;
		border-radius: 16rpx;
		overflow: hidden;
		// margin: 20rpx auto;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		background: #fff;

		&-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;

			&:active {
				transform: scale(0.98);
			}
		}
	}

	.container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

		.image-swiper {
			height: 340rpx;

			.swiper-item {
				width: 300rpx;
				height: 300rpx;
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
					transition: all 0.3s ease;
					object-fit: cover;

					&:active {
						transform: scale(0.96);
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
					}
				}
			}
		}

		.empty-tip {
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="%23ddd" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>') no-repeat center;
			background-size: 80rpx;
			opacity: 0.6;
		}
	}

	.jiexia-const {
		background-color: #fff;
		display: flex;
		padding: 60rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f0f0f0;
		align-items: center;
		transition: background-color 0.2s ease;
		text-align: center;


		&:active {
			background-color: #fafafa;
		}

		&:last-child {
			border-bottom: none;
		}

		>view:nth-child(1) {
			width: 160rpx;
			color: #666;
			font-size: 30rpx;
			flex-shrink: 0;
		}

		>view:nth-child(2) {
			width: 400rpx;
			color: #333;
			font-size: 30rpx;
			word-break: break-all;
			padding-right: 20rpx;
		}

		>view:nth-child(3) {
			color: #ff7f00;
			font-size: 26rpx;
			padding: 8rpx 16rpx;
			border-radius: 6rpx;
			background: rgba(255, 127, 0, 0.1);
		}
	}

	.button-container {
		padding: 40rpx;
		background: transparent;
		display: flex;
		justify-content: center;

		.modify-button {
			background: linear-gradient(to right, #ff7f00, #ff9d00);
			color: white;
			font-size: 32rpx;
			padding: 20rpx 60rpx;
			border-radius: 50rpx;
			border: none;
			width: auto;
			margin: 0;
			box-shadow: 0 6rpx 16rpx rgba(255, 127, 0, 0.3);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: rgba(255, 255, 255, 0.1);
				transform: rotate(30deg);
				transition: all 0.3s ease;
			}

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 12rpx rgba(255, 127, 0, 0.25);

				&::after {
					left: 100%;
				}
			}
		}
	}

	/* 全局动画效果 */
	view,
	image {
		transition: all 0.3s ease;
	}

	/* 安全区域适配 */
	.safe-area-inset-bottom {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>